/* 公共样式 */
/* 块级元素默认就是自适应浏览器的大小的 */
* {
    box-sizing: border-box;
    /* 取出浏览器的默认的样式 */
    padding: 0;
    margin: 0;
}

html {
    height: 100%;
}

/* 设置列表页面的背景图就是给body设置背景图 */
body {
    background-image: url("../image/背景.png");
    /* 可以看到效果是有一些拉伸的感觉，所以让背景图片禁止拉伸 */
    background-repeat: no-repeat;
    background-position: center center;
    /* 让图片尽可能填满元素 */
    background-size: cover;

    height: 100%;
}

.nav {
    height: 50px;
    /* 设置背景颜色深色，设置字体颜色是浅色 */
    background-color: rgba(50, 50, 50, 0.5);
    color: white;
    display: flex;
    align-items: center;
}

.nav img {
    width: 45px;
    height: 45px;
    /* 设置外边距 让logo的左右都有一些缝隙，不是紧挨着的 */
    margin-left: 30px;
    margin-right: 20px;
    /* 设置圆角矩形，让头像变成圆形 */
    border-radius: 22px;

}

.nav a {
    color: white;
    /* 去掉链接的下划线 */
    text-decoration: none;
    /* 建议使用内边距，可以扩大点击范围 */
    /* 也可以使用内边距，但是不如使用外边距更好 */
    padding: 0 10px;

}

.nav .spacer {
    width: 70%;
}

/* 页面的主题部分，也成为“版心” */
.container {
    /* 设置为页面水平居中 */
    width: 1000px;
    /* margin-left: auto;
    margin-right: auto; */

    /* 上下是0 左右时auto，就可以水平居中 */
    margin: 0 auto;
    /* 设置高度 */
    /* cala是类似函数的东西，()中的参数可以对尺寸进行计算，
       100%就是替换成了父级元素的高度（就是body的高度）
        注意：此时的运算符两边的空格一定要加上，否则会出bug*/
    height: calc(100% - 50px);
    background-color: gray;
}